<template>
    <div>
        <el-steps
            style="max-width: 100%;min-width: 100%;margin-top: 20px;background-color: rgb(250, 250, 250);padding: 20px 0;"
            :active="stepact" align-center>
            <el-step title="扫码上传" description="公众号平台账号授权绑定" />
            <el-step title="填写版本信息" description="填写小程序版本信息，上传代码" />
            <el-step title="提交微信审核" description="跳转微信页面提交审核" />
        </el-steps>

        <div style="margin-top: 20px;font-size: 24px;display: flex;flex-direction: column;align-items: center;"
            v-if="stepact == 1">
            <div>扫码上传</div>
            <div style="color:rgb(168, 171, 178)">公众平台账号授权绑定</div>
            <img v-if="imgshow" :src="imgurl" alt="" style="width:400px;height:400px;">
            <div v-if="imgshow" style="color:rgb(168, 171, 178)">请用微信扫描上方二维码进行体验版本推送</div>
            <div v-if="imgshow == false && pd == true" style="color:rgb(168, 171, 178)">当前您排队为第{{ pdform.position }}位
                <span v-if="pdform.estimated_wait_time != 0">,预计还需要{{ pdform.estimated_wait_time }}分钟,请耐心等待</span>
                <span v-if="pdform.estimated_wait_time == 0">正在获取登录二维码</span>
            </div>
            <div v-if="imgshow == false && pd == true"
                style="cursor: pointer;background-color: rgb(103, 125, 224);color:white;padding: 10px 80px;display: inline-block;margin-top: 20px;font-size: 16px;">
                排队中...</div>
            <div v-if="imgshow == false && pd == false && againpd == false" @click="getimg"
                style="cursor: pointer;background-color: rgb(103, 125, 224);color:white;padding: 10px 80px;display: inline-block;margin-top: 20px;font-size: 16px;">
                获取授权二维码</div>
            <div v-if="imgshow == false && pd == false && againpd == true" @click="getimg"
                style="cursor: pointer;background-color: rgb(103, 125, 224);color:white;padding: 10px 80px;display: inline-block;margin-top: 20px;font-size: 16px;">
                重新排队</div>
        </div>

        <div style="margin-top: 20px;font-size: 24px;display: flex;flex-direction: column;align-items: center;"
            v-if="stepact == 2 && versionshow == false">
            <div>扫码上传</div>
            <div style="color:rgb(168, 171, 178)">公众平台账号授权绑定</div>
            <el-form :model="version" label-width="auto" style="max-width: 600px;min-width: 600px;margin-top: 20px;;">
                <el-form-item label="版本号：" style="margin-bottom: 0px;">
                    <el-input v-model="version.version" placeholder="请输入版本号，格式:0.0.0" show-word-limit maxlength="100" />
                </el-form-item>
                <el-form-item>
                    当前最新版本为{{ versioning }}
                </el-form-item>
                <el-form-item label="版本描述：">
                    <el-input v-model="version.desc" type="textarea" :rows="2" placeholder="请输入版本描述" show-word-limit
                        maxlength="100" />
                </el-form-item>
            </el-form>
            <div @click="setversion"
                style="cursor: pointer;background-color: rgb(103, 125, 224);color:white;padding: 10px 80px;display: inline-block;margin-top: 20px;font-size: 16px;">
                上传代码</div>
        </div>

        <div style="margin-top: 20px;font-size: 24px;display: flex;flex-direction: column;align-items: center;"
            v-if="stepact == 2 && versionshow">
            <div>上传中 {{ percentage }}%</div>
            <div class="demo-progress">
                <el-progress :percentage="percentage" color="#f56c6c" />
            </div>
            <div
                style="cursor: pointer;background-color: rgb(103, 125, 224);color:white;padding: 10px 80px;display: inline-block;margin-top: 20px;font-size: 16px;">
                上传代码中...</div>
        </div>

        <div style="margin-top: 20px;font-size: 24px;display: flex;flex-direction: column;align-items: center;"
            v-if="stepact == 3">
            <div>最新版本：{{ version.version }}</div>
            <div>推送时间：{{ timeing }}</div>
            <div>
                在<span style="color:blue;cursor: pointer;"
                    @click="triggerCallVersionMethod">【版本管理】</span>内启用后，各工作台可进行版本推送审核
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="managementEdit">
import { addHost, checkLogin, upload, joinQueue, checkPosition, leaveQueue, setUserTimeout, getVersion } from "@/api/application/chanel";
import feedback from '@/utils/feedback'
const route = useRoute()
const pd = ref(false)
const againpd = ref(false)
const again = () => {
    stepact.value = 1
    imgshow.value = false
    imgurl.value = ""
    versionshow.value = false
    version.value = {
        app: route.query.app,
        version: "",
        desc: ""
    }
    timeing.value = ""
    percentage.value = 0
    pd.value = false
    pdform.value = {
        estimated_wait_time: 0,
        position: 0
    }
}

const stepact = ref(1)
const imgshow = ref(false)
const imgurl = ref("")
const pdform = ref({
    estimated_wait_time: 0,
    position: 0
})
const versioning = ref("")
const getversion = async () => {
    const data = await getVersion({ app: route.query.app })
    versioning.value = data.version_no
}
getversion()
const getimg = async () => {
    const data = await joinQueue({ app: route.query.app })
    pdform.value = data
    pd.value = true
    const timer = setInterval(() => {
        checkPosition({})
            .then(async (res: any) => {
                console.log(res)
                if (res.status == 1) {
                    clearInterval(timer)
                    const data = await addHost({})
                    imgurl.value = data.qr_code
                    imgshow.value = true
                    Scan()
                }
            })
            .catch((err: any) => {
                if (err.status == -1) {
                    clearInterval(timer)
                    again()
                }
            })
    }, 3000)
}
// 扫码
const Scan = () => {
    const timer = setInterval(() => {
        checkPosition({})
            .then(async (res: any) => {
                if (res.status == 1) {
                    checkLogin({})
                        .then(async (res: any) => {
                            if (res.login == 1) {
                                clearInterval(timer)
                                stepact.value = 2
                                imgshow.value = false
                                await setUserTimeout({})
                            }
                        })
                        .catch((err: any) => {
                            console.log('err', err)
                        })
                }
            })
            .catch((err: any) => {
                if (err.status == -1) {
                    clearInterval(timer)
                    again()
                }
            })
    }, 3000)
}
const versionshow = ref(false)
const version = ref({
    app: route.query.app,
    version: "",
    desc: ""
})
var timeing = ref("")
const percentage = ref(0)
const settime = () => {
    const timer = setInterval(() => {
        if (percentage.value < 99) {
            percentage.value++
        }
        if (percentage.value >= 100) {
            clearInterval(timer)
        }
    }, 500)
}
const setversion = async () => {
    checkPosition({})
        .then(async (res: any) => {
            if (res.status == 1) {
                if (!version.value.version) {
                    feedback.msgError("版本号不能为空")
                    return false
                }
                if (!version.value.desc) {
                    feedback.msgError("版本描述不能为空")
                    return false
                }
                try {
                    settime()
                    versionshow.value = true
                    await upload(version.value)
                    await leaveQueue({})
                    percentage.value = 100
                    stepact.value = 3
                    const now = new Date()
                    const year = now.getFullYear()
                    const month = String(now.getMonth() + 1).padStart(2, '0')
                    const day = String(now.getDate()).padStart(2, '0')
                    const hours = String(now.getHours()).padStart(2, '0')
                    const minutes = String(now.getMinutes()).padStart(2, '0')
                    const seconds = String(now.getSeconds()).padStart(2, '0')
                    timeing.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
                } catch (error) {
                    percentage.value = 100
                    versionshow.value = false
                }
            }
        })
        .catch((err: any) => {
            if (err.status == -1) {
                feedback.msgError("由于长时间未操作,您已被剔除队列,请重新排队")
                again()
            }
        })

}

import { defineEmits } from 'vue'

const emit = defineEmits(['callVersionMethod'])

const triggerCallVersionMethod = () => {
    again()
    emit('callVersionMethod')
}
</script>


<style scoped>
.demo-progress ::v-deep .el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
    min-width: 600px;
}
</style>